<template>
  <div id="app_version_set" class="container">
    <div class="content">
      <!-- <div class="title">APP版本管理</div> -->
      <div class="panel">
        <div class="condition">
          <div class="row_one">
            <el-select v-model="searchParam.type" clearable placeholder="请选择" style="width:1.5rem;">
              <el-option label="android" :value="1"></el-option>
              <el-option label="ios" :value="2"></el-option>
            </el-select>
            <el-input
              style="width: 3.5rem;"
              placeholder="搜索 APP名称"
              v-model="searchParam.appName"
              clearable
              class="input_search"
            ></el-input>
            <div @click="search(1)" class="search_btn" style="margin-left:0.1rem;">搜索</div>
            <div v-if="hasApi('appVersionAdd')" class="right_btn" @click="addVersion">新&nbsp;&nbsp;增</div>
          </div>
        </div>

        <div>
          <table class="table" cellspacing="0">
            <thead class="thead">
              <tr>
                <td style="width: 4rem;">名称</td>
                <td style="width: 4rem;">类型</td>
                <td style="width: 4rem;">版本号</td>
                <td style="width: 4rem;">强制更新</td>
                <td style="width: 4rem;">创建人</td>
                <td style="width: 4rem;">创建时间</td>
                <td style="width: 2rem;">操作</td>
              </tr>
            </thead>
            <tbody class="tbody">
              <tr v-for="(item,index) in versionList" :key="index">
                <td>{{item.appName}}</td>
                 <td>{{typeMap[item.type]}}</td>
                <td>{{item.version}}</td>
                <td>{{forceUpdateMap[item.forceUpdate]}}</td>
                <td>{{item.creator}}</td>
                <td>{{item.createTime}}</td>
                <td>
                  <span class="operate_btn" v-if="hasApi('appVersionUpdate')" @click="handleEdit(item)">编辑</span>
                  &nbsp;
                  <span class="operate_btn" v-if="hasApi('appVersionDelete')" @click="handleDelete(item)">删除</span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <el-pagination
          class="page"
          layout="total, sizes, prev, pager, next, jumper"
          :current-page="searchParam.currPage"
          @size-change="pageSizeChange"
          @current-change="curPageChange"
          :total="pagination.total"
        ></el-pagination>
      </div>
    </div>
    <el-dialog
      :title="editePopup.title" :visible.sync="editePopup.show"
      center width="30%" :close-on-click-modal="false"
      >
      <el-form ref="editeForm" :rules="editePopup.rules" :model="editePopup.form">
        <el-form-item label="APP名称" :label-width="formLabelWidth" prop="appName">
          <el-input style="width:90%" maxlength="30" clearable v-model="editePopup.form.appName" placeholder="请输入名称" ></el-input>
        </el-form-item>
        <el-form-item label="版本号" :label-width="formLabelWidth" prop="version">
          <el-input style="width:90%" maxlength="30" clearable v-model="editePopup.form.version" placeholder="请输入版本号" ></el-input>
        </el-form-item>
        <el-form-item label="描述" :label-width="formLabelWidth" prop="content">
          <el-input style="width:90%" maxlength="30" clearable v-model="editePopup.form.content" placeholder="请输入描述" ></el-input>
        </el-form-item>
        <el-form-item label="下载路径" :label-width="formLabelWidth" prop="downloadUrl">
          <el-input style="width:90%" maxlength="255" clearable v-model="editePopup.form.downloadUrl" placeholder="请输入下载路径" ></el-input>
        </el-form-item>
        <el-form-item label="是否强制更新" :label-width="formLabelWidth" prop="forceUpdate" >
          <el-radio-group v-model="editePopup.form.forceUpdate">
            <el-radio :label="1">
              <span style="font-size:0.16rem;">是</span>
            </el-radio>
            <el-radio :label="0">
              <span style="font-size:0.16rem;">否</span>
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="类型" :label-width="formLabelWidth" prop="type">
         <el-select v-model="editePopup.form.type" placeholder="请选择" style="width:90%;">
              <el-option label="android" :value="1"></el-option>
              <el-option label="ios" :value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button style="width:1.2rem;font-size: 0.16rem;" @click="editePopup.show = false">取 消</el-button>
        <el-button style="width:1.2rem;font-size: 0.16rem;" type="primary" @click="validateForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
let vm;
export default {
  data() {
    return {
      formLabelWidth:'120px',
      searchParam:{
        // campusId:this.$store.state.campusId,
        type:'',
        appName:'',
        currPage:1,
        pageSize:10,
      },
      pagination:{
        total:0,
      },
      typeMap:{1:'android', 2:'ios'},
      forceUpdateMap:{0:'不强制',1:'强制'},
      versionList:[],
      editePopup:{
        show:false,
        title:'新建',
        type:1,//1-新增；2-编辑
        form:{
          appName:'',
          version:'',
          content:'',
          downloadUrl:'',
          forceUpdate:'',
          type:''
        },
        rules: {
          appName: [
            { required: true, message: '请输入APP名称', trigger: 'blur' },
            { min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur' }
          ],
          version: [
            { required: true, message: '请输入版本号', trigger: 'blur' },
            { min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur' }
          ],
          content: [
            { required: true, message: '请输入描述', trigger: 'blur' },
            { min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur' }
          ],
          downloadUrl: [
            { required: false, message: '请输入下载路径', trigger: 'blur' },
            { min: 1, max: 255, message: '长度在 1 到 255 个字符', trigger: 'blur' }
          ],
          forceUpdate: [
            { required: true, message: '请选择更新类型', trigger: 'change' }
          ],
          type: [
            { required: true, message: '请选择类型', trigger: 'change' }
          ]
        }
      }
      
    };
  },
  components: {},
  watch: {},
  methods: {
    init() {
      this.search(1);
    },
    campusChange : function(campusId) { //校区改变
      // this.searchParam.campusId=campusId;
    },
    /**搜索 */
    search(pageIndex){
      this.searchParam.currPage=pageIndex||this.searchParam.currPage;
      let param={
        currPage:1,
        pageSize:10,
      };
      if(this.searchParam.type)param.type=this.searchParam.type;
      if(this.searchParam.appName)param.appName=this.searchParam.appName;
      api.appVersionList(param).then(function(data){
        if(data.resultCode==2000){
          vm.versionList=data.list;
          vm.pagination.total=data.totalCount;
        }
      });
    },
    pageSizeChange: function(val) {
      this.searchParam.pageSize = val;
      this.search(1);
    },
    /**表格显示形式翻页 */
    curPageChange(val) {
      this.search(val);
    },
    /**新增 */
    addVersion(){
      this.editePopup.title='新建';
      this.editePopup.type=1;
      this.editePopup.show=true;
      this.$nextTick(()=>{
        vm.resetFormFields();
        vm.editePopup.form={
          appName:'',
          version:'',
          content:'',
          downloadUrl:'',
          forceUpdate:'',
          type:''
        };
      });
    },
    /**编辑 */
    handleEdit(row) {
     
      this.editePopup.title='编辑';
      this.editePopup.type=2;
      this.editePopup.show=true;
      this.$nextTick(()=>{
        vm.resetFormFields();
        vm.editePopup.form=tool.clone(row);
      });
    },
    /**删除 */
    handleDelete(row) {
      this.$confirm("此操作将删除该记录, 是否继续?", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      })
        .then(() => {
          api.appVersionDelete({id:row.id}).then(function(data){
            if(data.resultCode==2000){
              vm.$message({
                type:'success',
                message:'删除成功！'
              });
              vm.search(1);
            }
            else{
              vm.$message({
                type:'warning',
                message:data.message||'操作失败！'
              });
            }
          });
        })
        .catch(() => {});
    },
    /**表单校验 */
    validateForm(){
      this.$refs['editeForm'].validate((valid) => {
        if (valid) {
          vm.editeSave();
        } else {
          // console.log('error submit!!');
          return false;
        }
      });
    },
    /**重置表单 */
    resetFormFields(){
      this.$refs['editeForm'].resetFields();
    },
    /**保存确认 */
    editeSave(){
      //新增
      if(this.editePopup.type==1){
        api.appVersionAdd(this.editePopup.form).then(function(data){
          if(data.resultCode==2000){
            vm.$message({
              type:'success',
              message:'新增成功！'
            });
            vm.editePopup.show=false;
            vm.search(1);
          }
          else{
            vm.$message({
              type:'warning',
              message:data.message||'操作失败！'
            });
          }
        });
      }
      //编辑
      else{
        let param={
          id:this.editePopup.form.id,
          appName:this.editePopup.form.appName,
          version:this.editePopup.form.version,
          content:this.editePopup.form.content,
          downloadUrl:this.editePopup.form.downloadUrl,
          forceUpdate:this.editePopup.form.forceUpdate,
          type:this.editePopup.form.type,
          _wait:''
        };
        api.appVersionUpdate(param).then(function(data){
          if(data.resultCode==2000){
            vm.$message({
              type:'success',
              message:'编辑成功！'
            });
            vm.editePopup.show=false;
            vm.search(1);
          }
          else{
            vm.$message({
              type:'warning',
              message:data.message||'操作失败！'
            });
          }
        });
      }
    }
  },
  mounted() {
    vm = this;
    this.init();
  },
  computed: {}
};
</script>
<style lang="scss">
#app_version_set {
  .el-input__inner {
    border-radius: 0.08rem;
    font-size: 0.16rem;
    color: #666666;
    height: 0.36rem;
    line-height: 0.36rem;
  }
  .el-input__icon {
    line-height: 0.36rem;
  }

  .input_search {
    .el-input__inner {
      background-color: rgb(247, 248, 250);
    }
  }
  .el-form-item__label{
    font-size: 0.16rem;
  }
  .el-dialog__header{
    text-align: left;
  }
  .el-dialog__title{
    font-size: 0.25rem;
  }
  
}
</style>
<style scoped src="@/style/module/table.css"></style>
<style scoped src="@/style/clue_manage/clue_manage.css"></style>
<style scoped>
.right_btn {
  background-image: url(../../assets/img/clue_manage/add_white.png);
  width: 1.54rem;
}
</style>